package com.example.newproject_overseas.Screen


import android.util.Log
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.selection.toggleable
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.example.newproject_overseas.components.BottomSheetContent
import com.example.newproject_overseas.components.TopApp
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterialApi::class)
@Composable
fun RepaymentMode(navController: NavHostController) {

    var isBottomSheetOpen by remember { mutableStateOf(false) }
    val state = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden,
        skipHalfExpanded = isBottomSheetOpen
    )
    val scope = rememberCoroutineScope()
    var selectedData by remember { mutableStateOf("") }

    Column(modifier = Modifier
        .fillMaxSize()
        .background(color = Color(0XFFEFF0F3)),) {
         //导航1
        TopApp(title = "Rollover mode", navController = navController)
         //内容卡片2
            Box(
                modifier = Modifier
                    .fillMaxWidth(1f)
                    .padding(top = 7.5.dp, start = 8.dp, end = 8.dp)
                    .shadow(2.dp)
            ) {
                Surface(shape = RoundedCornerShape(5.dp)) {
                    Column(
                        modifier = Modifier
                            .background(Color.White)
                    ) {
                        Row(
                            modifier = Modifier
                                .padding(horizontal = 10.dp)
                        ) {
                            Row(
                                modifier = Modifier
                                    .padding(top = 4.5.dp),
                                verticalAlignment = Alignment.CenterVertically
                            ) {
                                VerticalLines()
                                Text(text = "Repayment amount")
                            }
                            Spacer(modifier = Modifier.weight(1f))
                            Row {
                                Text(
                                    text = "₹",
                                    fontSize = 30.sp,
                                    color = Color(0xFFFFCC00),
                                    fontWeight = FontWeight.Bold
                                )
                                Text(
                                    text = "200,000",
                                    fontSize = 30.sp,
                                    color = Color(0xFFFFCC00),
                                    fontWeight = FontWeight.Bold
                                )
                            }
                        }
                        Divider(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(top = 10.dp, bottom = 21.dp, start = 10.dp, end = 10.dp)
                        )
                        Column(
                            modifier = Modifier
                                .padding(bottom = 48.5.dp, start = 10.dp, end = 10.dp)
                        ) {
                            Text(
                                text = "Choose your payment mode",
                                fontSize = 20.sp,
                                color = Color(0xFF999999),
                                modifier = Modifier.padding(bottom = 11.5.dp)
                            )

                            Surface(shape = RoundedCornerShape(5.dp)) {
                                Row(
                                    modifier = Modifier
                                        .background(Color(0xFFF1F1F1))
                                        .fillMaxWidth()
                                        .wrapContentHeight()
                                        .padding(start = 25.dp),
                                    verticalAlignment = Alignment.CenterVertically
                                ) {

                                    Box(modifier = Modifier.weight(6f)) {
                                        Text(
                                            text = if (selectedData.isNullOrEmpty()) "Please Choose" else selectedData,
                                            fontSize = 20.sp,
                                            fontWeight = FontWeight.Bold
                                        )
                                    }
                                    Spacer(modifier = Modifier.weight(1f))
                                    Row(modifier = Modifier) {
                                        Button(
                                            onClick = { scope.launch { state.show() } },
                                            modifier = Modifier
                                                .padding(top = 8.5.dp, bottom = 8.5.dp, end = 5.dp),
                                            colors = ButtonDefaults.buttonColors(Color(0xFFFFCC00)),
                                            shape = RoundedCornerShape(4.5.dp)
                                        ) {
                                            Text(
                                                text = "UPI",
                                                color = Color(0xFFFFFFFF),
                                                fontSize = 20.sp,
                                                fontWeight = FontWeight.Bold
                                            )
                                        }
                                    }

                                }
                            }

                        }
                    }
                }
            }
        //底部文字3
        Box(
            modifier = Modifier
                .fillMaxSize() // 占用全部可用空间
        ) {
            Text(
                text = "This loan is provided by a third-party company Loan House",
                fontSize = 10.sp,
                textAlign = TextAlign.Center,
                color = Color(0xFFA1A1A1),
                modifier = Modifier
                    .align(Alignment.BottomCenter) // 底部剧中对齐文本
                    .padding(bottom = 16.dp)
            )
        }
    }

    //底部弹出层4
    BottomSheetContent(
        state = state,
        dataList = listOf("Not updated after repayment", "Application passed but not credited"),
        onSelectData = { data -> selectedData = data },
        onCloseSheet = {  scope.launch { state.hide() } }
    )
}

@Composable
fun VerticalLines() {
    Canvas(
        modifier = Modifier
            .width(6.5.dp)
            .height(29.dp)
            .padding(
                top = 4.5.dp,
                end = 2.5.dp
            )
    ) {
        drawRoundRect(
            color = Color(0xFFFFCC00),
            cornerRadius = CornerRadius.Zero,
            size = size
        )
    }
}

@Preview
@Composable
fun RepaymentModePreview() {
    val navController = rememberNavController()
    RepaymentMode(navController)
}

